<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleClick">
        <el-menu-item index="99">
          {{ $t('table.all') }}
        </el-menu-item>
        <el-menu-item index="1">已颁发</el-menu-item>
        <el-menu-item index="0">待颁发证书</el-menu-item>
      </el-menu>
      <!-- 搜索筛选 -->
      <el-row :gutter="20" style="margin-top:20px">
        <el-col :span="3">
          <el-input v-model="query.name" type="text" placeholder="会员昵称" />
        </el-col>
        <el-col :span="3">
          <el-input v-model.number="query.bid" type="text" placeholder="会员ID" />
        </el-col>
        <el-col :span="3">
          <el-input v-model.number="query.id" type="text" placeholder="订单ID" />
        </el-col>
        <el-col :span="4">
          <el-date-picker v-model="query.created_start" type="datetime" placeholder="开始时间" style="width: 100%;" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" />
        </el-col>
        <el-col :span="4">
          <el-date-picker v-model="query.created_end" type="datetime" placeholder="结束时间" style="width: 100%;" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" />
        </el-col>
        <el-col :span="3">
          <el-button type="primary" icon="el-icon-search" @click="search">{{ $t('button.search') }}</el-button>
        </el-col>
      </el-row>
      <!-- 订单导出数据表 -->
      <el-row style="margin-top: 20px;">
        <el-col v-if="query.type===0" :span="3">
          <el-button type="primary" icon="el-icon-document" :disabled="!checkPermission('juan-edit')" @click="getSelected()">修改颁发状态</el-button>
        </el-col>
      </el-row>
      <!-- 数据表 -->
      <el-table v-loading="downloadLoading" tooltip-effect="dark" border :data="list" max-height="650px" style="margin-top: 20px;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="ID" prop="id" sortable="custom" width="60" />
        <el-table-column label="捐赠人" prop="name" />
        <el-table-column label="订单ID" prop="orderid" />
        <el-table-column label="订单号" prop="ordernum" />
        <el-table-column label="支付总金额" prop="totalprice" />
        <el-table-column label="捐赠比例(%)" prop="juan" />
        <el-table-column label="捐赠金额" prop="juan_price" />
        <el-table-column label="是否颁发证书" prop="is_juan">
          <template slot-scope="{row}">
            <el-tag :type="row.is_juan|statusFilter">
              {{ row.is_juan|JuanGroup }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.creationTime')" prop="created_at">
          <template slot-scope="{row}">
            {{ row.created_at|timeStanp }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" align="middle" style="margin-top:20px">
        <el-pagination background layout="total,prev,pager,next" :total="count" :page-size="query.limit" :current-page="query.page" @current-change="changPage" />
      </el-row>
    </div>

  </div>
</template>
<script>
import { JuanzengList, JuanType } from '@/api/user'
export default ({
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        0: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      activeIndex: '99',
      list: [],
      downloadLoading: false,
      statusData: [{
        id: 1,
        value: this.$t('table.normal')
      },
      {
        id: 2,
        value: this.$t('table.deactivate')
      }],
      groupData: [{
        id: 1,
        value: this.$t('table.list')
      },
      {
        id: 2,
        value: this.$t('table.row')
      }],
      groupType: [{
        id: 1,
        value: '服务商品'
      },
      {
        id: 2,
        value: '实物商品'
      }],
      query: {
        id: undefined,
        name: '',
        aid: 1,
        page: 1,
        bid: undefined,
        type: 99,
        created_start: '',
        created_end: '',
        limit: 10
      },
      count: 0,
      multipleSelection: []
    }
  },
  created() {
    // 获取userid
    this.getBusinessCateList()
  },
  methods: {
    // 批量上架
    async getSelected(index) {
      const data = {
        id: [],
        status: index
      }
      if (this.multipleSelection.length === 0) {
        this.$message.error(this.$t('prompt.noEmpty'))
        return
      }
      this.multipleSelection.forEach(item => {
        data.id.push(item.id)
      })
      try {
        await this.$confirm('确定这些用户已颁发证书了吗？')
        await JuanType(data)
        this.getBusinessCateList()
        this.$message.success('状态修改成功！')
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 监听tab点击事件
    handleClick(tab, event) {
      this.query.type = parseFloat(tab)
      this.query.page = 1
      this.getBusinessCateList()
    },
    // 获取商户分了列表
    async getBusinessCateList() {
      this.downloadLoading = true
      if (this.query.bid < 1) {
        this.query.bid = undefined
      }
      if (this.query.id < 1) {
        this.query.id = undefined
      }
      const { count, list } = await JuanzengList(this.query)
      this.count = count
      this.list = list
      this.downloadLoading = false
    },
    // 保存选择对象
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 搜索
    search() {
      this.query.page = 1
      this.getBusinessCateList()
    },
    // 分页
    changPage(newPage) {
      this.query.page = newPage
      this.getBusinessCateList()
    },
    openDialog() {
      // 判断有icon的数据
      if (this.formData.pic) {
        // 这里我们赋值，同时需要给赋值的地址一个标记 upload: true
        this.$refs.staffPhoto.fileList = [{ url: this.formData.pic, upload: true }]
      }
    }
  }
})
</script>
<style lang="scss">
.table-img{
  width: 90px;
}
</style>
